<template>
    <div id="allmap">
        <div class="swich">
            <el-checkbox v-model="checked">显示指导员信息列表</el-checkbox>
            <el-checkbox v-model="checkeds">显示垃圾桶照片</el-checkbox>
        </div>

        <!-- <iframe
            id="mapIFRAME"
            name="mapIFRAME"
            src="../../map.html"
            style="width: 100%;height: 96%;"
        ></iframe> -->
        <div class="tree">
            <!-- <v-tree :data="treeData" :clickNode='handleNodeClick' show-line></v-tree> -->
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="rightinformation">
            <p for>
                <span id="span1"></span>
            </p>
            <p for>
                <span id="span2"></span>
            </p>
            <p for>
                <span id="span3"></span>
            </p>
            <p for>
                <span id="span4"></span>
            </p>
            <p for>
                <span id="span5"></span>
            </p>
        </div>
    </div>
</template>


<script>
export default {
  name: 'Dashboard',
  map: '',
  data () {
    return {
      data: [{
        label: '天塔街道',
        sumPerson: 15782,
        sumBuilding: 751,
        sumHome: 8267,
        sumArea: 16,
        sumDis: 82,
        longitude: '117.191866',
        latitude: '39.087246',
        children: [{
          longitude: '117.192195',
          latitude: '39.087718',
          sumPerson: 133,
          sumBuilding: 85,
          sumHome: 85,
          label: '环湖南里社区',
          children: [{
            longitude: '117.193333',
            latitude: '39.086894',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '环湖南里'
          }, {
            longitude: '117.188724',
            latitude: '39.087835',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '环湖西里'
          }, {
            longitude: '117.189481',
            latitude: '39.088219',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '蔚蓝轩'
          }, {
            longitude: '117.194566',
            latitude: '39.086563',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '梧桐大厦'
          }, {
            longitude: '117.188429',
            latitude: '39.088565',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '新金龙大厦'
          }, {
            longitude: '117.190529',
            latitude: '39.088086',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '环湖里'
          }]
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '气象南里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '环湖东里社区',
          detail: '总楼数：32\n总户数：2040\n实住人数：6080',
          children: [{
            longitude: '117.191866',
            latitude: '39.087246',
            label: '环湖东里'
          }, {
            longitude: '117.191866',
            latitude: '39.087246',
            label: '环湖北里'
          }, {
            longitude: '117.191866',
            latitude: '39.087246',
            label: '华昌大厦'
          }]
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '宾水北里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '宾水东里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '宾水西里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '宾水南里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '育贤里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '高风里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '天资里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '富源里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '国风园社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '体院宿舍社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '立达博兰社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '五一阳光社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '紫金里社区'
        }]
      }],
      defaultProps: {
        children: 'children',
        longitude: 'longitude',
        latitude: 'latitude',
        label: 'label'
      },
      checked: true,
    }
  },
  methods: {
    handleNodeClick (data) {      sumPerson: 133,
        console.log(data.label);
      document.getElementById('span1').innerText = "总人数：" + data.sumPerson;
      document.getElementById('span2').innerText = "总户数：" + data.sumHome;
      document.getElementById('span3').innerText = "总楼数：" + data.sumBuilding;
      if (data.sumArea) {
        document.getElementById('span5').innerText = "社区数量：" + data.sumArea;
      } else {
        document.getElementById('span5').innerText = "";
      }
      if (data.sumDis) {
        document.getElementById('span4').innerText = "小区数量：" + data.sumDis;
      } else {
        document.getElementById('span4').innerText = "";
      }
      // window.frames["mapIFRAME"].addCircle(117.171519,39.101903);
      if (data.longitude) {
        document.getElementById("mapIFRAME").contentWindow.setMapCenter(data.longitude, data.latitude);
        document.getElementById("mapIFRAME").contentWindow.addCircle(data.longitude, data.latitude);
      }

    }
  },
  components: {

  },
  computed: {

  }

};
</script>


<style scoped>
.swich {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}
#allmap,
body {
    width: 100%;
    height: 100%;
    position: relative;
}
.tree {
    position: absolute;
    left: 10px;
    top: 40px;
    z-index: 555;
    width: 280px;
    height: 420px;
    overflow-y: scroll;
    opacity: 0.8;
    background: #fff;
}
.tree p {
    color: #60b6a1;
    font-size: 120%;
    margin-left: 10px;
    font-weight: 600;
}
.el-tree {
    color: #000;
    font-weight: 600;
    height: 100%;
    background: #fff;
}
.rightinformation {
    z-index: 555;
    position: absolute;
    /* width: 200px;
       height: 200px; */
    right: 10px;
    top: 40px;
    background: #000;
    opacity: 0.6;
    color: #fff;
    padding: 15px 20px;
}
.rightinformation > p {
    width: 100%;
}
</style>
